<template>
    <div class="product-show">
        <!--幻灯片-->
        <div class="product-swipe">
            <van-swipe :autoplay="3000">
                <van-swipe-item>1</van-swipe-item>
                <van-swipe-item>2</van-swipe-item>
                <van-swipe-item>3</van-swipe-item>
                <van-swipe-item>4</van-swipe-item>
            </van-swipe>
        </div>
        <!--商品名称-->
        <div class="product-info">
            <div class="product-name">「玫瑰紫草唇膏」滋润补水 减少唇纹 缓解干燥手工制作 可食用</div>
            <div class="product-price">¥<span>32.00</span></div>
        </div>
        <!--商家信息-->

        <!--商品详情-->
        <van-tabs v-model="tabsActive">
            <van-tab title="商品详情">
                商品详情
            </van-tab>
            <van-tab title="成交记录">
                成交信息
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import {Swipe, SwipeItem, Tab, Tabs} from 'vant';
    export default {
        name: "ProductShow",
        components: {
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem,
            [Tab.name]: Tab,
            [Tabs.name]: Tabs
        },
        data () {
            return {
                tabsActive: 0
            }
        }
    }
</script>

<style lang="scss" scoped>
    //幻灯片
    .product-swipe {
        position: relative;
        padding-bottom: 60%;
        .van-swipe {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    }
    //产品信息
    .product-info {
        padding: 10px 10px 9px;
        border-bottom: 1px solid #eaeaea;
        margin-bottom: 10px;
        //产品名称
        .product-name {
            font-size: 14px;
            line-height: 25px;
        }
        //价格
        .product-price {
            height: 30px;
            font-size: 12px;
            line-height: 30px;
            color: #f30;
            span {
                font-size: 16px;
            }
        }
    }
</style>